<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>列表</title>
</head>
<body>
     <div id="root">
         <h2>
             <ul>
                 <!-- 使用v-for遍历数组 -->
                 <li v-for='(p,index) in person' :key='p.id'>
                     {{p.name}}----{{p.age}}岁---{{p.sex}}
                 </li>
             </ul>
         </h2>


         <h2>
             <ul>
                 <!-- 使用v-for遍历对象 -->
                 <li v-for='(value,key) in car' :key='key'>
                     {{value}}
                 </li>
             </ul>
         </h2>

         <h2>
             <ul>
                 <!-- 使用v-for遍历对象 -->
                 <li v-for='(data,index) in string' :key='index'>
                     {{data}}
                 </li>
             </ul>
         </h2>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                person:[
                    {id:'001',name:'老刘',age:22,sex:'男'},
                    {id:'002',name:'老赵',age:27,sex:'女'},
                    {id:'003',name:'老王',age:99,sex:'男'},
                    {id:'004',name:'老李',age:45,sex:'男'},
                ],
                car:{
                    name:'byd',
                    price:'27万',
                    color:'red'
                },
                string:'string'
            },
            methods:{

            }
        });
    </script>
</body>
</html>